<template>
    <div class="w-full">
        <loading class="absolute top-1/2" v-if="voicePackageDetail == null"></loading>
        <div v-else>
            <!-- 顶部 -->
            <div class="flex p-6 pt-0 items-center">
                <div class="relative">
                    <img class="object-cover max-w-[12rem] rounded-lg" :src="voicePackageDetail?.avatar" alt="">
                    <div
                        class="flex absolute top-2 right-2 bg-[rgba(0,0,0,0.4)] w-fit text-white px-2 rounded items-center">
                        <el-icon size="15" class="text-gray-200">
                            <Headset />
                        </el-icon>
                        <p class="ml-1">{{$utils.formatPlayCount(voicePackageDetail?.playCount) }}</p>
                    </div>
                </div>
                <div class="flex flex-col ml-10 justify-between">
                    <div>
                        <h1 class="font-bold text-2xl">{{ voicePackageDetail?.name }}</h1>
                        <p class="line-clamp-3 my-2 text-[var(--iconBg)]">
                            {{ voicePackageDetail?.intro }}
                        </p>
                        <div class="flex my-3">
                            <img class="w-6 h-6 border rounded-full object-cover"
                                :src="voicePackageDetail?.userInfo.avatar" alt="">
                            <span class="mx-2 text-[var(--iconBg)]">{{ voicePackageDetail?.userInfo.intro }}</span>
                            <!-- <span class="px-5">标签：<span class="text-blue-500"
                                v-for="item in songListDetailInfo?.playlist.tags">{{
                                    item + " " }}</span></span> -->
                            <span class="ml-2 text-[var(--iconBg)]">{{
                                $utils.formatUpdateTime(voicePackageDetail?.createTime) }} 创建</span>
                        </div>
                    </div>
                    <!-- <div class="flex items-center relative">
                        <i class="iconfont icon-24gf-play absolute text-white before:text-xs left-3"></i>
                        <button
                            class="text-white text-sm tracking-widest bg-[var(--playBg)] rounded-[4px] h-8 px-4 pl-7 mr-3">播放全部</button>
                        <el-button :icon="FirstAidKit">{{ voicePackageDetail?.voiceInfoList.length}}</el-button>
                        <el-button :icon="Download">下载</el-button>
                        <el-button :icon="MoreFilled"></el-button>
                    </div> -->
                </div>
            </div>
            <!-- 列表 -->
            <div class="px-6 relative">
                <el-tabs class="myElTabs" v-model="activeName" @tab-click="handleTabClick">
                    <el-tab-pane :label="`语音条 (${voicePackageDetail?.voiceInfoList.length})`" name="first">
                        <!-- 歌曲列表 -->
                        <SongList :songList="voicePackageDetail?.voiceInfoList" :slider="false"></SongList>
                    </el-tab-pane>
                    <el-tab-pane label="评论" name="second">
                        <!-- 发布评论 -->
                        <el-input v-model="commentTextarea" :rows="4" type="textarea" maxlength="130" show-word-limit
                            :placeholder="replyToUserInfo?`回复 ${replyToUserInfo.username}`:'说点什么吧'" resize="none" />
                        <div class="flex justify-end mt-2" @click="publishComment">
                            <el-button
                                :style="`background-color:var(--active);color:var(--playBg);border-color: var(--inputBg);`"
                                :icon="Send" @click="publishComment">发布</el-button>
                        </div>
                        <loading v-if="commentLoading" class="scale-50 mt-[-2rem]">
                        </loading>
                        <!-- 评论列表 -->
                        <ul class="my-3" v-else>
                            <li class="font-bold text-lg">
                                最新评论 <sup>{{ voicePackageComments?.length }}</sup>
                            </li>
                            <li class="flex border-b py-2 my-5" v-for="item in voicePackageComments"
                                :key="item.commentId">
                                <img loading="lazy" class="object-cover w-14 h-14 border rounded-full"
                                    :src="item.userInfo?.avatar" alt="">
                                <div class=" w-full ml-3">
                                    <div class="flex items-center">
                                        <p class="text-[var(--text)] mr-1">{{ item.userInfo?.username }}</p>
                                        <span class="text-[var(--active)] ml-1 mr-1">回复</span>
                                        <p class="text-[var(--text)] mr-1">{{ item.replyUserInfo?.username }}</p>
                                        <!-- <img class="object-cover w-12" v-if="item.userInfo?.decoration"
                                            :src="item.userInfo?.decoration.url" alt=""> -->
                                    </div>
                                    <p class="line-clamp-3 mt-1 mb-4">{{ item.content }}</p>
                                    <div class="w-full flex justify-between">
                                        <span class="text-[var(--iconBg)]">{{ item.createTime }}</span>
                                        <div>
                                            <i class="iconfont icon-good ml-5 hover:cursor-pointer"></i>
                                            <i class="iconfont icon-zhuanfa ml-5 hover:cursor-pointer"></i>
                                            <i class="iconfont icon-xiaoxi ml-5 hover:cursor-pointer"
                                                @click="replyToUser(item.userInfo)"></i>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li class="text-center">
                                <el-button @click="loadMoreComments" :loading="commentLoading"
                                    v-if="showLodaMoreComments">加载更多评论</el-button>
                                <el-empty :image-size="60" v-else description="没有更多评论了"></el-empty>
                            </li>
                        </ul>
                    </el-tab-pane>
                    <!-- <el-tab-pane :label="`收藏 (${voicePackageDetail?.voiceInfoList.length})`" name="third">
                        <div class="w-full p-6">
                            <ul class="grid grid-cols-4 gap-4" v-if="songListDetailInfo?.playlist.subscribers.length">
                                <li v-for="item in songListDetailInfo?.playlist.subscribers" :key="item.userId"
                                    class="w-52 flex flex-col items-center p-5 hover:bg-white cursor-pointer transition-all rounded-lg">
                                    <img class="object-cover w-40 h-40 rounded-full" :src="item.avatarUrl" alt="">
                                    <p class="my-2">{{ item.nickname }}</p>
                                    <p class="line-clamp-1">{{ item.signature ? item.signature : "这个人很懒，什么都没有留下" }}</p>
                                </li>
                            </ul>
                            <el-empty v-else :image-size="60" description="还没有人收藏哦~"></el-empty>
                        </div>
                    </el-tab-pane> -->
                </el-tabs>
            </div>
        </div>
    </div>
</template>
<script setup lang='ts'>
    import { FirstAidKit, Download, MoreFilled, Headset } from '@element-plus/icons-vue'
    import { ref, onMounted, onUnmounted, getCurrentInstance } from 'vue';
    import { useRoute } from 'vue-router'
    import { useStore } from '@renderer/store'
    import { storeToRefs } from 'pinia'
    import SongList from './components/songList.vue'
    import { addVoicePackageCommentApi } from "@renderer/api/voice"

    const { proxy } = getCurrentInstance();


    const { voice } = useStore()
    const { voicePackageDetail } = storeToRefs(voice)

    const route = useRoute()

    const scrollValue = ref < string | number > (0)
    const activeName = ref < string > ('first')


    /**
   * 评论数据
  **/
    const commentLoading = ref(true) //是否加载中
    const currentPage = ref(1); // 当前页码
    const lastPage = ref(1); // 最后一页
    const showLodaMoreComments = ref(true)
    const { voicePackageComments } = storeToRefs(voice)
    const commentTextarea = ref()
    const replyToUserInfo = ref()


    onMounted(() => {
        getVoicePackageDetail()
        document.querySelector('#main')?.scrollTo(0, 0)
        scrollValue.value = route.query.scrollValue as number | string
    })

    onUnmounted(() => {
        document.querySelector('#main')?.scrollTo(0, scrollValue.value as number)
    })

    const getVoicePackageDetail = async () => {
        await voice.getVoicePackageDetail(route.query.id)
    }

    const getVoicePackageComment = async () => {
        await voice.getVoicePackageComment(route.query.id)
    }

    const handleTabClick = (tab) => {
        if (tab.paneName === 'second') {
            fetchComments(1);
        } else if (tab.paneName === 'third') {
            fetchSubscribers();
        }
    }

    const loadMoreComments = () => {
        fetchComments(currentPage.value + 1);
    }

    const fetchComments = async (page) => {
        if (page > lastPage.value) return showLodaMoreComments.value = false; // 如果已经加载到最后一页，直接返回
        commentLoading.value = true; // 设置加载中状态
        const response = await voice.getVoicePackageComments(route.query.id, page); // 后端请求
        if (response) {
            voicePackageComments.value = voicePackageComments.value.concat(response.data);
            currentPage.value = response.current_page;
            lastPage.value = response.total;
        }
        commentLoading.value = false; // 加载完成
    }

    const publishComment = proxy?.$utils.debounce(async () => {
        await addVoicePackageCommentApi({
            packageId: route.query.id,
            content: commentTextarea.value,
            toUid: replyToUserInfo.value.uid ?? 0
        })
        commentTextarea.value = ""
        replyToUserInfo.value = null
    })

    const replyToUser = (userInfo) => {
        replyToUserInfo.value = userInfo
    }
</script>
<style scoped>
    :deep(.el-tabs__item) {
        color: var(--playBg);
    }

    :deep(.el-tabs__active-bar) {
        background-color: var(--active);
    }

    :deep(.el-textarea__inner:focus) {
        --el-input-focus-border-color: var(--playBg);
    }
</style>